<template>
  <div class="Service">
    <div class="bja">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="公共服务" left-text="" left-arrow>

      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="bj"></div>

    <div class="chain">
      <p class="chain_txt">公共服务</p>
      <div class="chain_img">
        <a href="tel:075526476789">
          <div class="img1"></div>
        </a>

        <div class="img2" @click="tousu"></div>
        <div class="img3" @click="tianqi"></div>
      </div>
    <div class="chain_img">


      </div>
    </div>
  </div>
</template>

<script>
  // import city from '@/assets/js/city.js'
  // import AMap from "AMap"
  export default {

    components: {
      // "v-search": search,
    },
    data() {
      return {

      }
    },

    mounted() {

      // console.log(this.ityList)
      // console.log(this.chengshi)
      // for(let i=0;i < this.city.length;i++){
      //   console.log(this.city[0])
      // }
    },
    created() {
      // this.getLocation();
      // this.getLngLatLocation()
    },
    methods: {
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
      tianqi(){
        this.$router.push({
          path:"/weather/weather"
        })
      },
      tousu(){
        this.$router.push({
          path:"/Complaint/OnlineUpload"
        })
      },
    },

  }
</script>

<style lang="scss">
  .Service {
    height: 5rem;
    // background: red;
    width: 100%;
    position: relative;
    .bja{
      .van-icon {
        color: white !important;

      }
    }
    .bj {
      width: 100%;
      height: 180px;
      // background: #46d0ca;
      background: url(../../assets/home/tp/gongg.jpg) no-repeat;
      background-size: 100%;
    }

    .chain {
      width: 95%;
      margin: 20px auto;
      border: 1px solid #eee;
      border-radius: 8px;
      box-shadow: 0px 0px 1px 1px #eee;
      .chain_txt {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #eee;
        font-weight: 400;
        font-size: 14px;
      }

      .chain_img {
        height: 100px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;

        .img1 {
          width: 60px;
          height: 80px;
          background: url(../../assets/jiaotong/7.png) no-repeat;
          background-size: 100%;
        }

        .img2 {
          width: 60px;
          height: 80px;
          background: url(../../assets/jiaotong/8.png) no-repeat;
          background-size: 100%;
        }

        .img3 {
          width: 60px;
          height: 80px;
          background: url(../../assets/jiaotong/9.png) no-repeat;
          background-size: 100%;
        }


      }
    }
  }
</style>
